<script lang="ts">
  import { Dialog as SheetPrimitive } from "bits-ui"
  import Cross2 from "svelte-radix/Cross2.svelte"
  import { fly } from "svelte/transition"
  import { SheetOverlay, SheetPortal, type Side, sheetTransitions, sheetVariants } from "./index.js"
  import { cn } from "$lib/utils.js"

  type $$Props = SheetPrimitive.ContentProps & {
    side?: Side
  }

  let className: $$Props["class"] = undefined
  export let side: $$Props["side"] = "right"
  export { className as class }
  export let inTransition: $$Props["inTransition"] = fly
  export let inTransitionConfig: $$Props["inTransitionConfig"] = sheetTransitions[side ?? "right"].in
  export let outTransition: $$Props["outTransition"] = fly
  export let outTransitionConfig: $$Props["outTransitionConfig"] = sheetTransitions[side ?? "right"].out
</script>

<SheetPortal>
  <SheetOverlay />
  <SheetPrimitive.Content
    {inTransition}
    {inTransitionConfig}
    {outTransition}
    {outTransitionConfig}
    class={cn(sheetVariants({ side }), className)}
    {...$$restProps}
  >
    <slot />
    <SheetPrimitive.Close
      class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
    >
      <Cross2 class="h-4 w-4" />
      <span class="sr-only">Close</span>
    </SheetPrimitive.Close>
  </SheetPrimitive.Content>
</SheetPortal>
